<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="本月用电" :total="cardData.thisMonth.consumption">
          <div>
              <span slot="term">月均用电</span>
              {{cardData.avgMonth.consumption}} kwh
          </div>
          <template slot="footer">本年累计<span> {{cardData.thisYear.consumption}} kwh </span></template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="本月电费" :total="cardData.thisMonth.cost">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
              <span slot="term">月均电费</span>
              {{cardData.avgMonth.cost}} 万元
          </div>
          <template slot="footer">本年累计<span> {{cardData.thisYear.cost}} 万元 </span></template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="本月排放(标煤)" :total="cardData.thisMonth.coalEmission">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
              <span slot="term">月均排放</span>
              {{cardData.avgMonth.coalEmission}} T
          </div>
          <template slot="footer">本年累计<span> {{cardData.thisYear.coalEmission}} T </span></template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="本月排放(CO2)" :total="cardData.thisMonth.carbonEmission">
          <div>
              <span slot="term">月均排放</span>
              {{cardData.avgMonth.carbonEmission}} T
          </div>
          <template slot="footer">本年累计<span> {{cardData.thisYear.carbonEmission}} T </span></template>
        </chart-card>
      </a-col>
    </a-row>
    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
      <div class="salesCard">
        <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
          <div class="extra-wrapper" slot="tabBarExtraContent">
            <div class="extra-item">
              <a>今日</a>
              <a>本周</a>
              <a>本月</a>
              <a>本年</a>
            </div>
          </div>
          <a-tab-pane loading="true" tab="用电量" key="1">
            <a-row>
              <a-col :xl="24" :lg="12" :md="12" :sm="24" :xs="24">
                <div style="width:90%; height:330px;margin: 0 5%;">
                  <div id="main" ref="e4" class="five"></div>
                </div>
              </a-col>
              <a-col :xl="0" :lg="12" :md="12" :sm="24" :xs="24">
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>
    <a-row :gutter="12">
      <a-card :loading="loading" :class="{ 'anty-list-cust':true }" :bordered="false" :style="{ marginTop: '24px' }">
        <a-tabs  size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
          <a-tab-pane loading="true" tab="用能排行" >
            <a-table :dataSource="dataSource" size="default" :rowKey="(record, index) => index" :columns="columns"  @change="tableChange1">
              <template slot="flowRate" slot-scope="text, record, index">
                <a-progress :strokeColor="getPercentColor(record.flowRate)" :format="getPercentFormat" :percent="getFlowRateNumber(record.flowRate)" style="width:80px" />
              </template>
            </a-table>
          </a-tab-pane>
        </a-tabs>
      </a-card>
    </a-row>

  </div>
</template>

<script>
  import { httpAction, getAction, postAction } from '@/api/manage'
  import * as echarts from 'echarts';
  import ACol from "ant-design-vue/es/grid/Col"
  import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
  import ChartCard from '@/components/ChartCard'
  import MiniBar from '@/components/chart/MiniBar'
  import MiniArea from '@/components/chart/MiniArea'
  import BarMultid from '@/components/chart/BarMultid'
  import DashChartDemo from '@/components/chart/DashChartDemo'

  const dataCol1 = [{
    title: '排名',
    align:"center",
    dataIndex: 'ranking'
  },{
    title: '名称',
    align:"center",
    dataIndex: 'dept'
  },{
    title: '用电量(kwh)',
    align:"center",
    dataIndex: 'consumption'
  },{
    title: '电费(万元)',
    align:"center",
    dataIndex: 'cost'
  },{
    title: '碳排放(T)',
    align:"center",
    dataIndex: 'carbonEmission'
  },{
    title: '标煤(T)',
    align:"center",
    dataIndex: 'coalEmission',
    // scopedSlots: { customRender: 'flowRate' }
  }];

  
  export default {
    components: {
      ATooltip,
      ACol,
      ChartCard,
      MiniArea,
      MiniBar,
      DashChartDemo,
      BarMultid,
    },
    data() {
      return {
        loading: true,
        dataSource:[],
        columns:dataCol1,
        
        chart: null,
        data1: [],
        data2: [],
        cardData: {
          avgMonth:{carbonEmission:'',coalEmission:'',consumption:'',cost:''},
          thisMonth:{carbonEmission:'',coalEmission:'',consumption:'',cost:''},
          thisYear:{carbonEmission:'',coalEmission:'',consumption:'',cost:''}
        },
        url: {
          loadElectricityTotal: '/consumptionElectricity/consumptionElectricity/loadElectricityTotal',
          getCard: '/consumptionElectricity/consumptionElectricity/getCard',
          getIndexChart: '/consumptionElectricity/consumptionElectricity/getIndexChart',
        },
      }
    },
    methods:{
      tableChange1(pagination){
        this.ipagination1.current = pagination.current
        this.ipagination1.pageSize = pagination.pageSize
        this.queryTimeoutInfo()
      },
      getFlowRateNumber(value){
        return Number(value)
      },
      getPercentFormat(value){
        if(value==100){
          return "超时"
        }else{
          return value+"%"
        }
      },
      getPercentColor(value){
        let p = Number(value)
        if(p>=90 && p<100){
          return 'rgb(244, 240, 89)'
        }else if(p>=100){
          return 'red'
        }else{
          return 'rgb(16, 142, 233)'
        }
      },
      
      getIndexChart(){
        getAction(this.url.getIndexChart).then((res)=> {
          for(let i = 0 ; i < res.result.length ; i++){
            res.result[i].ranking = i + 1;
          }
          this.dataSource = res.result;
        })
      },
      getCard(){
        getAction(this.url.getCard).then((res)=> {
          res.result.thisMonth.carbonEmission = res.result.thisMonth.carbonEmission + " T";
          res.result.thisMonth.coalEmission = res.result.thisMonth.coalEmission + " T";
          res.result.thisMonth.consumption = res.result.thisMonth.consumption + " kwh";
          res.result.thisMonth.cost = (res.result.thisMonth.cost/10000).toFixed(2) + " 万元";
          res.result.avgMonth.cost = (res.result.avgMonth.cost/10000).toFixed(2) + " 万元";
          res.result.thisYear.cost = (res.result.thisYear.cost/10000).toFixed(2) + " 万元";
          this.cardData = res.result;
        })
      },
      loadElectricityTotal(){
        getAction(this.url.loadElectricityTotal).then((res)=>{
          setTimeout(() => {
            this.getzhu(res.result);
          }, 900)
        })
      },
      getzhu(res){
        if(this.chart != null && this.chart != '' && this.chart != undefined){
          this.chart.dispose();
        }
        var chartDom = document.getElementById('main');
        this.chart = echarts.init(chartDom);
        var option;
        let data = [];
        res.forEach(e => {
          data[e.month-1] = e.consumption;
        })
        option = {
          title: {
            text: '用电量统计'
          },
          tooltip: {trigger: 'axis'},
          legend: {
            data: ['耗电量']
          },
          toolbox: {
            feature: {
              dataView: {
                show: true,
                readOnly: false
              },
              magicType: {
                show: true,
                type: ['line', 'bar']
              },
              restore: {
                show: true
              },
              saveAsImage: {
                show: true
              }
            },
            padding: [0,15,0,0]
          },
          xAxis: {
            type: 'category',
            data: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '耗电量',
              data: data,
              type: 'bar'
            }
          ],
        };
        option && this.chart.setOption(option,true);
      },
    },
    created() {
      this.getCard();
      this.getIndexChart();
      setTimeout(() => {
        this.loading = !this.loading
      }, 1000)
    },
    mounted(){
      this.loadElectricityTotal();
    }
  }
</script>

<style lang="less" scoped>
  .five {
    width: 100%;
    height: 100%;
  }
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }

  .anty-list-cust {
    .ant-list-item-meta{flex: 0.3 !important;}
  }

</style>
<!-- <template>
  <div >
    <index-chart v-if="indexStyle==1"></index-chart>
    <index-bdc v-if="indexStyle==2"></index-bdc>
    <index-task v-if="indexStyle==3"></index-task>
    <div style="width: 100%;text-align: right;margin-top: 20px">
      请选择首页样式：
      <a-radio-group v-model="indexStyle">
        <a-radio :value="1">统计图表</a-radio>
        <a-radio :value="2">统计图表2</a-radio>
        <a-radio :value="3">任务表格</a-radio>
      </a-radio-group>
    </div>
  </div>
</template>

<script>
  import IndexChart from './IndexChart'
  import IndexTask from "./IndexTask"
  import IndexBdc from './IndexBdc'

  export default {
    name: "Analysis",
    components: {
      IndexChart,
      IndexTask,
      IndexBdc,
    },
    data() {
      return {
        indexStyle:2
      }
    },
    created() {

    },
    methods: {

    }
  }
</script> -->